<template>
  <div id="addCard">
    <div class="header">
      <div class="header-cen">
        <div class="header-left">性名</div>
        <div class="header-right">
          <input
            type="text"
            @input="bankNameInput"
            v-model="formattingobj.bank_account_name"
            placeholder="请输入持卡人姓名"
            placeholder-class="input-placeholder"
          />
        </div>
      </div>
      <div class="header-footer">Accout Holder</div>
    </div>
    <div class="header header-bottom">
      <div class="header-cen">
        <div class="header-left">账号</div>
        <div class="header-right">
          <input
            type="text"
            @input="bankAccountInput"
            v-model="formattingobj.bank_card_no"
            placeholder="请输入银行卡号"
            placeholder-class="input-placeholder"
          />
        </div>
      </div>
      <div class="header-footer">Accout No</div>
    </div>
    <div class="header">
      <div class="header-cen">
        <div class="header-left">开户行</div>
        <div class="header-right headerBank">
          <van-field
            :value="formattingobj.bank_name"
            placeholder="请选择开户行"
            input-align="right"
            :disabled="true"
            @click="showBank"
          />
        </div>
      </div>
      <div class="header-footer">Bank Name</div>
    </div>
    <!-- <div class="header">
      <div class="header-cen">
        <div class="header-left">银行代码</div>
        <div class="header-right"><input type="text"
        v-model="formattingobj.bank_code"
        placeholder="请输入银行代码" placeholder-class="input-placeholder"></div>
      </div>
      <div class="header-footer">
        Accout No
      </div>
    </div>-->
    <!-- <div class="header header-bottom">
      <div class="header-cen">
        <div class="header-left">SWIFT Code</div>
        <div class="header-right"><input type="text"
        placeholder="SWIFT Code"
        placeholder-class="input-placeholder"
        v-model="formattingobj.bank_swift_code"></div>
      </div>
      <div class="header-footer">
        Accout Holder
      </div>
    </div>-->
    <div class="header">
      <div class="header-cen">
        <div class="header-left">住址</div>
        <div class="header-right">
          <input
            type="text"
            @input="addressInput"
            v-model="formattingobj.address"
            placeholder="请输入家庭住址"
            placeholder-class="input-placeholder"
          />
        </div>
      </div>
      <div class="header-footer">Home Address</div>
    </div>
    <div class="header header-bottom">
      <div class="header-cen">
        <div class="header-left">电话</div>
        <div class="header-right">
          <input
            type="text"
            @input="telInput"
            v-model="formattingobj.tel"
            placeholder="请输入电话号码"
            placeholder-class="input-placeholder"
          />
        </div>
      </div>
      <div class="header-footer">Phone No</div>
    </div>
    <div class="goin">
      <van-button
        color="linear-gradient(to right, #4bb0ff, #6149f6)"
        @click="save"
        size="small"
        block
        round
        class="goin"
      >提交</van-button>
    </div>

    <!--右侧弹窗-->
    <van-popup
      class="left_popup"
      :show="isShowBank"
      position="bottom"
      @close="onClose"
      custom-style="width: 100%;height: 40%;"
    >
      <div class="left">
        <div class="num" @click="cancel">取消</div>
        <div class="search_input">
          <van-search
            v-model="searchVal"
            shape="round"
            @change="search"
            background="#f9f9f9"
            placeholder="请输入..."
          />
        </div>
        <div class="title_gray" @click="confirm">确定</div>
      </div>
      <div class="list">
        <ul>
          <li v-for="(item,i) in bankList" @click="select(i,item)" :key="i">
            <span :class="index == i ? 'no active': 'no'">
              {{item.bank_name}}
              <van-icon
                v-if="index == i"
                name="success"
                class="icon_d"
                :class="{active: index == i}"
                color="#226DF0"
              />
            </span>
          </li>
        </ul>
      </div>
    </van-popup>
    <!--提示弹窗-->
    <van-toast id="van-toast" />
  </div>
</template>
<script>
import Toast from "@/../static/vant/toast/toast";
export default {
  data() {
    return {
      searchVal: "",
      bankBase: "",
      isShowBank: false,
      index: -1,
      bankData: [],
      formattingobj: {
        bank_name: "", // 银行名称
        bank_card_no: "", // 银行卡号
        bank_account_name: "", // 银行户名
        tel: "", // 联系电话
        // bank_swift_code:'', // Swift code
        address: "" // 住址
        // bank_code:"", // 银行代码
      }
    };
  },
  computed: {
    //  模糊搜索查询
    bankList() {
      if (this.bankData) {
        var _this = this;
        var bankList = [];
        _this.bankData.map(function(item) {
          if (item.bank_name.search(_this.searchVal) != -1) {
            bankList.push(item);
          }
        });
        return bankList;
      }
    }
  },

  onShow() {
    if (wx.getStorageSync("objlist") != "") {
      this.formattingobj = wx.getStorageSync("objlist");
    } else {
      this.formattingobj = {
        bank_name: "", // 银行名称
        bank_card_no: "", // 银行卡号
        bank_account_name: "", // 银行户名
        tel: "", // 联系电话
        // bank_swift_code:'', // Swift code
        address: "" // 住址
      };
    }
    // 获取银行信息
    this.bankCardList();
  },
  methods: {
    ValidatePhone(val) {
      var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/; //手机号码
      var isMob = /^0?1[3|4|5|8][0-9]\d{8}$/; // 座机格式  区号之后用'-'隔开
      if (isMob.test(val) || isPhone.test(val)) {
        return true;
      } else {
        return false;
      }
    },
    // 开户行确认按钮
    confirm() {
      this.isShowBank = false;
      this.formattingobj.bank_name = this.searchVal;
      this.formattingobj.bank_name = this.bankBase;
    },
    // 开户行取消按钮
    cancel() {
      this.isShowBank = false;
    },
    // 开户行搜索
    search(e) {
      this.searchVal = e.mp.detail;
    },

    // 住址
    addressInput(e) {
      this.formattingobj.address = e.mp.detail.value;
    },
    // 性名 校验
    bankNameInput(e) {
      let reg = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/; //  姓名正则
      if (!reg.test(e.mp.detail.value)) {
        Toast("您输入正确姓名");
        this.formattingobj.bank_account_name = "";
      } else {
        this.formattingobj.bank_account_name = e.mp.detail.value;
      }
    },
    // 卡号 校验
    bankAccountInput(e) {
      this.formattingobj.bank_card_no = e.mp.detail.value;
    },
    //联系电话
    telInput(e) {
      this.formattingobj.tel = e.mp.detail.value;
    },
    // 获取银行信息
    bankCardList() {
      this.$http
        .post({
          url: "/mobile/api/banks",
          data: {
            country: "10000"
          }
        })
        .then(res => {
          if (res.code == "RX0000") {
            this.bankData = res.data;
          } else {
            wx.showToast({
              title: res.data
            });
          }
        });
    },
    save() {
      //  手机号验证码校验
      if (this.formattingobj.bank_account_name == "") {
        Toast("请输入持卡人姓名");
        return;
      }
      let regbank = /^([1-9]{1})(\d{15}|\d{18})$/; //银行卡号
      if (
        this.formattingobj.bank_card_no == "" ||
        !regbank.test(this.formattingobj.bank_card_no)
      ) {
        Toast("请输入银行卡号");
        return;
      }
      if (this.formattingobj.bank_name == "") {
        Toast("请选择开户银行");
        return;
      }
      let isPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码
      if (
        this.formattingobj.tel == "" ||
        !isPhone.test(this.formattingobj.tel)
      ) {
        Toast("您输入正确联系方式");
        return;
      }
      // 判断新增修改
      if (wx.getStorageSync("objlist") != "") {
        //接口调用成功后返回卡包修改
        this.$http
          .post({
            url: "/mobile/api/updatemybankcard",
            data: this.formattingobj
          })
          .then(res => {
            if (res.code == "RX0000") {
              Toast("提交成功");
              wx.navigateBack({
                delta: 1, // 返回上一级页面。
                success: function() {}
              });
            } else {
              wx.showToast({
                title: res.data
              });
            }
          });
      } else {
        //接口调用成功后返回卡包新增
        this.$http
          .post({
            url: "/mobile/api/addmybankcard",
            data: this.formattingobj
          })
          .then(res => {
            if (res.code == "RX0000") {
              wx.navigateTo({
                url: "/pages/cardBag/main"
              });
            } else {
              wx.showToast({
                title: res.data
              });
            }
          });
      }
    },
    select(index, item) {
      this.index = index;
      this.bankBase = item.bank_name;
    },
    showBank() {
      this.isShowBank = true;
    },
    onClose() {
      this.isShowBank = false;
    }
  }
};
</script>

<style lang='less'>
page {
  display: block;
  min-height: 100%;
  background: rgba(249, 249, 249, 1);
}
.header {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px #eeeeee solid;
}
.header-cen {
  padding-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.input-placeholder {
  font-size: 11px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
input {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.header-left {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 19px;
}
.header-footer {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-bottom: 10px;
  color: rgba(102, 102, 96, 1);
  line-height: 19px;
}
.header-bottom {
  margin-bottom: 10px;
}
.van-cell:after {
  border: none !important;
}
.van-cell {
  padding: 0px !important;
}
.headerBank {
  padding-right: 23%;
}
#addCard {
  .left_popup {
    box-sizing: border-box;
    padding: 0 10px;
    position: relative;
    .left {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #f9f9f9;
      font-size: 14px;
      text-align: center;
      position: fixed;
      bottom: 32%;
      overflow: hidden;
      /*border-bottom: 1px solid #f9f9f9;*/

      .num {
        color: #333;
        /*height: 40px;*/
        float: left;
        width: 70px;
        height: 50px;
        text-align: center;
      }
      .title_gray {
        color: #db4a37;
        /*height: 40px;*/
        float: right;
        width: 70px;
        height: 50px;
        text-align: center;
      }
      .search_input {
        width: 60%;
        float: left;
        .van-search__content--round {
          border-radius: 17px;
          border-radius: calc(var(--search-input-height, 34px) / 2);
          border: 1px solid #999;
        }
        .van-search {
          -webkit-align-items: center;
          align-items: center;
          box-sizing: border-box;
          padding: 8px 12px;
          padding: var(--search-padding, 8px 12px);
        }
      }
    }
    .list {
      box-sizing: border-box;
      padding: 2px 20px;
      text-align: center;
      margin-top: 50px;
      & > ul {
        li {
          height: 35px;
          line-height: 35px;

          & > span {
            display: inline-block;
            &.no {
              width: 100%;
              height: 26px;
              line-height: 26px;
              color: #666;
              font-size: 14px;
              text-align: left;
              position: relative;
              z-index: -1;
            }
            &.active {
              color: #226df0;
            }
            .icon_d {
              /*float: right;*/
              position: absolute;
              top: 4px;
              right: 12px;
              z-index: -1;
            }
          }
        }
      }
    }
  }
  .goin {
    width: 90px;
    height: 30px;
    line-height: 30px;
    margin: 10px auto;
  }
}
</style>
